<template>
  <div
    v-if="opened"
    v-dragMove="{
      DragButton: '.CreateAlertTitle',
      DragWindow: '.CreateAlert',
    }"
  >
    <div class="window CreateAlert">
      <div
        :class="[
          'title-bar',
          'CreateAlertTitle',
          titleBarInactive ? 'inactive' : '',
        ]"
      >
        <img
          v-if="valid.ok"
          class="title-bar-img"
          src="@/assets/win98icons/msg_question-0.png"
        />
        <img
          v-else
          class="title-bar-img"
          src="@/assets/win98icons/msg_error-0.png"
        />
        <div class="title-bar-text">Submit</div>
        <div class="title-bar-controls">
          <button aria-label="Close" @click="close()"></button>
        </div>
      </div>
      <div class="window-body">
        <div>{{ valid.msg }}</div>
        <div
          class="inline-container"
          style="margin-top: 12px; justify-content: center"
        >
          <button
            style="margin: 0 6px; min-width: 40px; padding: 0 12px"
            @click="close()"
          >
            取消
          </button>
          <button
            v-if="valid.ok"
            style="margin: 0 6px; min-width: 40px; padding: 0 12px"
            @click="handleClickYes()"
          >
            确认并提交
          </button>
        </div>
      </div>
    </div>
  </div>
  <div
    class="modal-cover"
    style="z-index: 5"
    v-if="opened"
    @click="handleModalClick()"
  ></div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted, h } from "vue";
import handleCreate from "./handleCreate.js";
const props = defineProps({ userInput: { type: Object, required: true } });
const opened = ref(false);
const open = () => {
  opened.value = true;
};
defineExpose({ open });
const emit = defineEmits(["yes", "no", "ok", "close"]);
const handleClickYes = () => {
  opened.value = false;
  handleCreate(props.userInput);
  emit("yes");
  emit("close");
};
const handleClickNo = () => {
  opened.value = false;
  emit("no");
  emit("close");
};
const close = () => {
  opened.value = false;
  emit("close");
};

const valid = computed(() => {
  if (props.userInput.description.length < 10) {
    return {
      msg: "问题描述不得小于10字",
      ok: false,
    };
  } else if (props.userInput.name.length < 2) {
    return {
      msg: "请输入提交人",
      ok: false,
    };
  } else if (props.userInput.replied && props.userInput.reply.length < 10) {
    return {
      msg: "技保/网络部门回复内容不应小于10个字",
      ok: false,
    };
  } else if (props.userInput.requirement.length == 0) {
    return {
      msg: "未填写修改需求，提交后将不能再更改内容，确认提交吗？",
      ok: true,
    };
  } else {
    return {
      msg: "提交后将不能再更改内容，确认提交吗？",
      ok: true,
    };
  }
});

const titleBarInactive = ref(false);
let modalClickTimer = null;
let modalClickCounter = 0;
const handleModalClick = () => {
  modalClickCounter = 0;
  modalClickTimer = setInterval(() => {
    titleBarInactive.value = !titleBarInactive.value;
    modalClickCounter++;
    if (modalClickCounter >= 10) {
      titleBarInactive.value = false;
      clearInterval(modalClickTimer);
    }
  }, 50);
};
</script>

<style scoped>
@import "@/styles/98.css";
@import "@/styles/98custom.css";

.CreateAlert {
  z-index: 6;
  width: 300px;
  /* height: 100px; */
  left: calc(50% - 150px);
  top: 200px;
}
</style>
